<template>
	<view class="relative">

		<image class='background-image' :src="ossUrl + '/dazhupanbj.png'" mode="widthFix"></image>
		<view class="zhuan">
			<view :class="{'rotate':isRotate}" :style="{transform:`rotate(${angle}deg)`}" class="zhuanBox">

				<image :src="ossUrl + '/dazhuanpan.png'" mode="aspectFit" class="zhuanBox"></image>
				<view :class="'zhuangpan_'+ index" v-for="item,index in prizeList" class="zhuangpanprizeName"
					:key="index">
					<view class="prizeNameclass">{{item.prizeName}}</view>
					<image :src="item.imgUrl" mode="aspectFit" class="zhuangpanprizeNameimag"></image>
				</view>
			</view>

			<image :src="ossUrl + '/dazhupanzi.png'" mode="widthFix" @click="open()" class="an "
				style="width:218rpx;height:218rpx;"></image>
		</view>
		<view
			style="width: 90%;height: 400rpx;background: #FFF9E5;position: absolute;margin-top: 1000rpx;margin-left: 40rpx;border-radius: 10rpx;">
			<view style="text-align: center;display: flex;margin-left: 80rpx;margin-top: 20rpx;">
				<view class="notice-line"></view>
				<view style="color: #FF2300;font-weight:bold;">中奖记录</view>
				<view class="notice-line"></view>
			</view>
			<view>
				<view class="notice" style="background-color: #0000;">
					<scroll-view class="notice-scroll" :scroll-y="true" :scroll-with-animation="true"
						:scroll-top="scrollTop">
						<view :animation="animationData" class="notice-content">
							<view class="notice-item" v-for="(item, index) in noticeList" :key="index"
								@tap="handleClickNotice(item)">
								<text style="width: 30%;">{{ item.nickName }}</text>
								<text
									style="width: 30%;margin-left: 5%;">消耗[{{item.integral}}积分]抽中{{ item.prizeName }}</text>
								<text style="width: 30%;margin-left: 5%;">{{ item.createTime }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view>
			<u-modal :show="show" width='534rpx' confirm-text='确定' cancel-text='取消' title='提示'
				:show-cancel-button='true' @confirm='submit' @cancel='quxiao'>
				<view class="slot-content" style="text-align: center;">
					是否消耗{{integral}}积分进行抽奖
				</view>
			</u-modal>

		</view>
		<view>
			<u-popup :show="listdatastype1" mode="center" width='534rpx' @close="quxiao" closeable="true">
				<view style="width: 534rpx;height: auto;text-align: center;padding-bottom: 20rpx;">
					<image style="width: 180rpx;height: 180rpx;margin-left: 32%;margin-top: 14%;" :src="ossUrl + '/zhongjiang1.png'"></image>

					<view>
						恭喜你中奖啦
					</view>
					<view class="listdatastypeclass">
						{{ listdatas.name }}
					</view>
					<view style="width: 340rpx;margin-left: 20%;margin-top: 20rpx;">
					<u-button text="立即领取" type="warning" @click="Receive" shape="circle"  size="small"></u-button></view>
				</view>
			</u-popup>
			
			<u-popup :show="listdatastype2" mode="center" width='534rpx' @close="listdatastype2=false" closeable="true">
				<view style="width: 534rpx;height: auto;text-align: center;padding-bottom: 20rpx;">
					<image style="width: 180rpx;height: 180rpx;margin-left: 32%;margin-top: 14%;" :src="ossUrl + '/zhongjiang1.png'"></image>
			
					<view>
						恭喜你中奖啦
					</view>
					<view class="listdatastypeclass">
						{{ listdatas.name }}
					</view>
					<view style="width: 340rpx;margin-left: 20%;margin-top: 20rpx;">
					<u-button text="继续抽奖" type="warning" @click="submit" shape="circle"  size="small"></u-button></view>
				</view>
			</u-popup>
			<u-popup :show="listdatastype3" mode="center" width='534rpx' @close="listdatastype3=false" closeable="true">
				<view style="width: 534rpx;height: 400rpx;text-align: center;">
					<image style="width: 180rpx;height: 180rpx;margin-left: 34%;margin-top: 14%;" :src="ossUrl + '/zhongjiang2.png'"></image>
			
					<view>
						谢谢参与，再接再厉
					</view>
					
					<view style="width: 340rpx;margin-left: 20%;margin-top: 20rpx;">
					<u-button text="继续抽奖" type="warning" @click="submit" shape="circle"  size="small"></u-button></view>
				</view>
			</u-popup>
			
			
		</view>
	</view>
</template>

<script>
	import api from '@/service/config/api.js'
	import Modal from '@/components/wl-modal/wl-modal'
	export default {
		data() {
			return {
				ossUrl: "https://bsl-app-images.oss-cn-beijing.aliyuncs.com/wechat-app/images",
				noticeList: [

				], // 通知列表
				timer: null, // 定时器
				interval: 2000, // 滚动时间间隔
				scrollTop: 0, // 滚动距离
				currentIndex: 0, // 当前通知索引
				isRotate: false, //是否旋转
				prizeList: [], //奖品列表，决定旋转角度
				angle: 0, //旋转角度
				show: false,
				integral: '',
				/*需要消耗积分*/
				getBigWheelAppletid: '',
				/*转盘id*/
				listdatas: {},
				listdatastype1: false,
				listdatastype2: false,
				listdatastype3: false
			}
		},
		mounted() {

			this.obtinBigWheel();
			this.initNoticeList();
		},
		props: {
			notices: {
				// 外部传入的通知列表
				type: Array,
				default: [],
			},
		},

		watch: {
			// 实现可动态传入通知列表
			notices() {
				this.initNoticeList();
			},
		},
		destroyed() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {

			// 初始化通知列表
			initNoticeList() {
				const _this = this;

				let list = {
					size: 40,
					current: 1,
				}

				api.get('/goods/bigWheel/getBigWheelLotteryRecordList', list, ).then(res => {


					_this.noticeList = res.data.records
					if (_this.noticeList.length > 1) {
						_this.timer = setInterval(() => {
							_this.handleScrollNotice();
						}, _this.interval);
					}

				}).finally(() => {

				})



			},
			// 点击通知时触发
			handleClickNotice(item) {
				this.$emit("click", item);
			},
			// 滚动通知
			handleScrollNotice() {
				const len = this.noticeList.length;
				if (this.currentIndex === len - 1) {
					this.currentIndex = 0;
				} else {
					this.currentIndex++;
				}
				this.animateScroll();
			},
			// 动画滚动
			animateScroll() {
				const _this = this;
				const noticeHeight = 30; // 通知高度，根据实际情况调整
				const scrollTop = _this.currentIndex * noticeHeight;
				_this.scrollTop = scrollTop;
			},



			/*领取奖品*/
			Receive() {
				console.log(this.listdatas)

				api.post('/order/api/order/preOrder', {
					preOrderType: 7,
					productDetails: [{
						buyNum: 1,
						brandId: this.listdatas.productInfo.brandId,
						productId: this.listdatas.productId,
						bigWheelLotteryRecordId: this.listdatas.bigWheelLotteryRecordId
					}]
				}).then(res => {
					uni.navigateTo({
						url: '../pages/confirm?order=' + res.data.preOrderNo + '&preOrderTypeid=' + 7 +
							'&content=' + this.listdatas.content
					})
				})

			},
			quxiao() {
				this.show=false
				this.listdatastype3 = false
				this.listdatastype2 = false
				this.listdatastype1 = false
				this.angle = 0;
			},
			/*确定抽奖按钮*/
			submit() {
				if (this.isRotate) return;
				this.show = false;
				this.angle = 0;
				this.lottery()
			},
			open() {
				if (this.isRotate) return;
				this.show = true;
			},
			/*大转盘基本信息*/
			obtinBigWheel() {
				let shujs = uni.getStorageSync('tenantId')

				return new Promise(resolve => {

					api.get('/goods/api/bigWheel/getBigWheelApplet2', {
						functionRange: shujs
					}, ).then(res => {
						for (let index = 0; index < 9; index++) {
							const element = res.data.prizeList[index];
							this.prizeList.push(element);

						}
						this.integral=res.data.integral
						this.getBigWheelAppletid = res.data.id
				
					}).finally(() => {

					})
				})


			},
			/*获取奖品*/
			lottery() {
				if (this.isRotate) return;
				let shujs = uni.getStorageSync('basicUnserInfo')
				api.post('/goods/bigWheel/lottery', {
					id: this.getBigWheelAppletid,
					dealerId: shujs.accountInfo.customerId,
				}, ).then(res => {
					this.listdatastype3 = false
					this.listdatastype2 = false
					this.listdatastype1 = false
					this.listdatas = res.data;
					this.rotate()
					console.log(res.data, "shuju")
				})

			},

			rotate() {
				if (this.isRotate) return;

				let num = -1;
				for (let i = 0; i < this.prizeList.length; i++) {
					if(this.prizeList[i].id==this.listdatas.id){
						console.log(this.prizeList[i].id)
						console.log(this.listdatas.id)
						console.log(this.prizeList[i].name)
						num=i
						break;
					}
				}
				if(num == -1) return this.$utils.showToast('网络异常，请稍后重试！');
				// let num=7;	//随机奖品，可以改成后端返回的。
				console.log(num)
				// let angle=360/8*num+rand(0,44);//不排除转到中间线
				this.angle = (4 * 360 + 360-40*num);
				this.isRotate = true;
				setTimeout(() => {
					this.isRotate = false;
					if (this.listdatas.type == 2) {
						this.listdatastype1 = true;
					} else if (this.listdatas.type == 1 || this.listdatas.type == 3) {
						this.listdatastype2 = true;
					} else if (this.listdatas.type == 4) {
						this.listdatastype3 = true;
					}
					
				}, 5000)
			}
		}
	}
</script>

<style lang="scss">
	.prizeNameclass{
		width: 80rpx;
		display: -webkit-box;
		/* 表示几行后超出隐藏 */
		-webkit-line-clamp: 1;
		/* 超出隐藏 */
		overflow: hidden;
		/*超出显示为省略号*/
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
	}
	.notice-line {
		border-bottom: 1rpx solid #EEC5B3; // 下边框
		height: 2rpx;
		margin-top: 14rpx;
		width: 200rpx;
	}

	.notice {
		/* 组件高度，根据实际情况调整 */
		height: 300rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.notice-scroll {
		width: 100%;
		height: 100%;
	}

	.notice-content {
		display: flex;
		flex-direction: column;
	}

	.notice-item {
		/* 通知高度，根据实际情况调整 */
		height: 60rpx;
		/* 通知行高，根据实际情况调整 */
		line-height: 60rpx;
		padding-left: 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 20rpx;
	}

	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding-left: 30rpx;
	}

	.zhuangpan_0 {
		margin-left: 300rpx;
		margin-top: 50rpx;
		position: absolute;
		font-size: 18rpx;
	}

	.zhuangpan_1 {
		transform: rotate(40deg);
		margin-left: 480rpx;
		margin-top: 110rpx;
		position: absolute;
		font-size: 18rpx;
	}


	.zhuangpan_2 {
		transform: rotate(80deg);
		margin-left: 560rpx;
		margin-top: 260rpx;
		position: absolute;
		font-size: 18rpx;
	}

	.zhuangpan_3 {
		transform: rotate(120deg);
		margin-left: 534rpx;
		margin-top: 424rpx;
		position: absolute;
		font-size: 18rpx;
	}

	.zhuangpan_4 {
		transform: rotate(160deg);
		margin-left: 400rpx;
		margin-top: 537rpx;
		position: absolute;
		font-size: 18rpx;
	}

	.zhuangpan_5 {
		transform: rotate(200deg);
		margin-left: 220rpx;
		margin-top: 535rpx;
		position: absolute;
		font-size: 18rpx;

	}

	.zhuangpan_6 {
		transform: rotate(240deg);
		margin-left: 88rpx;
		margin-top: 429rpx;
		position: absolute;
		font-size: 18rpx;

	}

	.zhuangpan_7 {
		transform: rotate(280deg);
		margin-left: 54rpx;
		margin-top: 250rpx;
		position: absolute;
		font-size: 18rpx;

	}

	.zhuangpan_8 {
		transform: rotate(320deg);
		margin-left: 148rpx;
		margin-top: 97rpx;
		position: absolute;
		font-size: 18rpx;

	}



	.zhuan {

		position: absolute;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* top:50%; */
		top: 18%;
		margin-left: 20rpx;

	}

	.zhuangpanprizeName {
		text-align: center;

	}

	.zhuangpanprizeNameimag {
		width: 80rpx;
		height: 80rpx;

	}

	.zhuanBox {
		position: absolute;
		width: 700rpx;
		height: 700rpx;
	}

	.an {
		position: absolute;
		margin-top: 200rpx;

		margin-left: 240rpx;
	}

	.an:active {
		transform: scale(1.1);
	}

	.rotate {
		/* animation: rotate 5s infinite linear; */
		/* animation-timing-function: ease-in-out; */
		/* animation-timing-function: cubic-bezier(0.42, 0, 0.58, 0.9); */
		/* animation-timing-function: cubic-bezier(0.25,0.1,0.25,1); */
		transform: rotate(3800deg);
		transition: transform 5s ease;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			/* transform: rotate(360deg); */
			transform: rotate(3800deg);
		}
	}

	.relative {
		width: 100%;
		height: 100%;
		background: #ff6e13;
	}

	.background-image {
		height: 100%;
		position: absolute;
		width: 100%;

	}
	.listdatastypeclass{
		width: 100%;
		display: -webkit-box;
		text-align: center;
		/* 表示几行后超出隐藏 */
		-webkit-line-clamp: 1;
		/* 超出隐藏 */
		overflow: hidden;
		/*超出显示为省略号*/
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
	}
</style>